<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Charge Distribution</title>
</head>
<body>
<canvas id="myCanvas" width="520" height="350"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Define geometric parameters based on an equilateral triangle
    const L = 160; // Side length of the triangle
    const h = L * Math.sqrt(3) / 2; // Height of the triangle

    // Define base coordinates for vertices for a visually centered drawing
    const cx = 240;
    const baseY = 260;

    const a = { x: cx - L / 2, y: baseY };
    const b = { x: cx + L / 2, y: baseY };
    const c = { x: cx, y: baseY - h };

    // Define coordinates for the dashed construction lines
    // 'd' is the third vertex of the adjacent equilateral triangle 'cbd'
    const d = { x: b.x + L / 2, y: c.y };
    // Top-rightmost point of the horizontal dashed line
    const e = { x: d.x + 80, y: d.y };
    // Endpoint for the descending diagonal dashed line
    const g = { x: e.x - L / 2, y: b.y };

    // Midpoints for drawing medians
    const M_ab = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
    const M_ac = { x: (a.x + c.x) / 2, y: (a.y + c.y) / 2 };
    const M_bc = { x: (b.x + c.x) / 2, y: (b.y + c.y) / 2 };
    const M_cd = { x: (c.x + d.x) / 2, y: (c.y + d.y) / 2 };
    const M_bd = { x: (b.x + d.x) / 2, y: (b.y + d.y) / 2 };


    // --- Drawing starts ---

    // Style for solid lines representing the physical rods
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Draw the main solid triangle (abc)
    ctx.beginPath();
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(b.x, b.y);
    ctx.lineTo(c.x, c.y);
    ctx.closePath();
    ctx.stroke();

    // Style for dashed construction lines
    ctx.lineWidth = 1.5;
    ctx.setLineDash([5, 5]);

    // Draw medians of triangle abc
    ctx.beginPath();
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(M_bc.x, M_bc.y);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(b.x, b.y);
    ctx.lineTo(M_ac.x, M_ac.y);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(c.x, c.y);
    ctx.lineTo(M_ab.x, M_ab.y);
    ctx.stroke();
    
    // Draw minor dashed lines to indicate the grid continues
    ctx.beginPath();
    ctx.moveTo(c.x, c.y);
    ctx.lineTo(c.x - 30, c.y); // Short segment to the left from c
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(a.x - 30, a.y + 10); // Short segment from a
    ctx.stroke();

    // Draw the right-hand structure (triangle cbd and its medians)
    ctx.beginPath();
    ctx.moveTo(c.x, c.y);
    ctx.lineTo(d.x, d.y);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(b.x, b.y);
    ctx.lineTo(d.x, d.y);
    ctx.stroke();
    
    // Draw medians of triangle cbd
    ctx.beginPath();
    ctx.moveTo(c.x, c.y);
    ctx.lineTo(M_bd.x, M_bd.y);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(b.x, b.y);
    ctx.lineTo(M_cd.x, M_cd.y);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(d.x, d.y);
    ctx.lineTo(M_bc.x, M_bc.y);
    ctx.stroke();
    
    // Draw far-right construction lines
    ctx.beginPath();
    ctx.moveTo(d.x, d.y);
    ctx.lineTo(e.x, e.y);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(e.x, e.y);
    ctx.lineTo(g.x, g.y);
    ctx.stroke();


    // --- Labels ---
    ctx.setLineDash([]); // Reset to solid lines for text
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Vertex labels
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('a', a.x - 15, a.y + 5);
    ctx.fillText('b', b.x + 10, b.y + 5);
    ctx.fillText('c', c.x, c.y - 15);

    // Point labels
    ctx.fillText('A', cx - 25, baseY - h * 0.45);
    ctx.fillText('B', cx + L / 2 + 25, baseY - h * 0.7);

    // Caption
    ctx.font = '18px Arial';
    ctx.fillText('电图 1.29.1', cx + 30, baseY + 60);

</script>
</body>
</html>